import { projectUpdate } from '@/services/workBench';
import { useStoreWorkbench } from '@/store/workbench';
import { permissionOption } from '@/utils/constant';
import { Select, Tabs } from 'antd';
import React, { useState } from 'react';
import Demand from './Demand';
import Member from './Member';
import Setup from './Setup';
import styles from './index.less';

const TabsArr = [
  { label: `需求`, key: `需求` },
  { label: `成员`, key: `成员` },
  { label: `设置`, key: `设置` },
];

const MiddleGround: React.FC = ({}) => {
  const [tabKey, setTabKey] = useState<string>('需求');
  const { currentMenuItem } = useStoreWorkbench();

  const handleSelectChange = async (value: string) => {
    if (currentMenuItem?.projectId) {
      console.log(`selected ${value}`);
      await projectUpdate({
        id: currentMenuItem?.projectId,
        permission: value,
      });
      document.dispatchEvent(new CustomEvent('emitSearch'));
    }
  };

  return (
    <div className={styles['middle-ground']}>
      <div className={`flex-between ${styles['header-wrap']}`}>
        <div className={`flex-left ${styles['project-name']}`}>
          项目权限:
          <Select
            size="small"
            // value={currentMenuItem?.permission}
            defaultValue={currentMenuItem?.permission}
            style={{ width: 180, marginLeft: 12 }}
            options={permissionOption}
            onChange={handleSelectChange}
          />
        </div>
        <div className={styles['tab-wrap']}>
          <Tabs
            activeKey={tabKey}
            centered
            items={TabsArr}
            onChange={(key) => setTabKey(key)}
          />
        </div>
        <div style={{ width: 300 }} />
      </div>

      {tabKey === '需求' && <Demand />}
      {tabKey === '成员' && <Member />}
      {tabKey === '设置' && <Setup />}
    </div>
  );
};

export default MiddleGround;
